<template>
  <div class="big-page">
    <template v-for="(child, index) in children.children">
      <div class="big-card" :key="index" v-if="child.type === 'mAdvertisement'">
        <div class="author">
          <div class="creator">
            <div class="creator-card">
              <div class="user-name">
                <img :src="child.model.resource.creator.avatar" />
                <span class="user-title">{{
                  child.model.resource.creator.username
                }}</span>
              </div>
              <h5>{{ child.model.resource.title }}</h5>
            </div>
            <div class="main-img">
              <img :src="child.model.resource.cover" />
            </div>
            <div class="tui-guang">
              <span>立即查看</span>
              <span>推广</span>
            </div>
          </div>
        </div>
      </div>

      <div
        class="article-card"
        v-if="child.type === 'mArticle'"
        :key="index"
      >
        <div class="team-title">
          <div class="title-top" @click="getUserId(child)">
            <img :src="child.model.resource.author.userinfo.avatar" alt="" />
            <span>{{ child.model.resource.author.userinfo.username }}</span>
            <span
              >和其他<span>{{ child.model.resource.team_user_count }}</span
              >人</span
            >
          </div>

          <p>+关注<i class="iconfont icon-diandian"></i></p>
        </div>
        <div class="main-title">{{ child.model.resource.title }}</div>
        <div class="main-img">
          <div class="video-img" ref="videoImg" @click="getVideoId(child)">
            <img v-if="!show" :src="child.model.resource.cover" />

            <video
             v-if="show"
              :src="videos? videos.url:''"
              width="100%"
              autoplay
              muted
              ref="video"
              @click="$router.push({ path: '/classify' })"
            ></video>
          </div>

          <div class="look">
            <span
              >{{ getPlay(child.model.resource.count.count_view) }}w观看</span
            >|
            <span
              >{{ getPlayTime(child.model.resource.duration) }}'{{
                getPlaySecond(child.model.resource.duration)
              }}'</span
            >
          </div>
        </div>
        <div class="team-down" v-if="child.type==='mArticle'">
          <span
            ><i class="iconfont icon-shoucang"></i
            >{{ getPlay(child.model.resource.count.count_collect) }}w</span
          >
          <span
            ><i class="iconfont icon-pinglun"></i
            >{{ child.model.resource.count.count_comment }}</span
          >
          <span
            ><i class="iconfont icon-dianzan"></i
            >{{ getPlay(child.model.resource.count.count_like) }}w</span
          >
        </div>
      </div>
    </template>
  </div>
</template>

<script>
export default {
  data: function () {
    return {
      show: false,
      videos: null,
    };
  },
  props: ["children"],
  components: {},
  created: function () {
    if(this.children.children[0].type=='mArticle'){
      this.axios
      .get(
        "https://apis.netstart.cn/xpc/article/" +
          this.children.children[0].model.resource.id
      )
      .then((res) => {
        // console.log(res.data.data.video.content.progressive);
        this.videos = res.data.data.video.content.progressive;
        this.videos = this.videos[this.videos.length - 1];
        // console.log(this.videos);
      });
      
    }
     window.addEventListener("scroll", this.scrollHeight);
   
  },
  computed:{
    getVideoIds(){
    return  this.children.children[0].model.resource.id
    } 
  },
  watch:{
    getVideoIds(n){
       if(this.children.children[0].type=='mArticle'){
               this.axios
      .get(
        "https://apis.netstart.cn/xpc/article/" +
         n
      )
      .then((res) => {
        // console.log(res.data.data.video.content.progressive);
        this.videos = res.data.data.video.content.progressive;
        this.videos = this.videos[this.videos.length - 1];
        console.log(this.videos);
      });
       }
  
    }
  },
  // beforeRouteUpdate(to,from,next){
  //   console.log(123);
  //       this.axios
  //     .get(
  //       "https://apis.netstart.cn/xpc/article/" +
  //         this.children.children[0].model.resource.id
  //     )
  //     .then((res) => {
  //       // console.log(res.data.data.video.content.progressive);
  //       this.videos = res.data.data.video.content.progressive;
  //       this.videos = this.videos[this.videos.length - 1];
  //       // console.log(this.videos);
  //     });

  //     next()
   
  // },
  destroyed() {
     window.removeEventListener("scroll", this.scrollHeight);
 },

//   beforeUpdate:function(){
//  window.addEventListener("scroll", this.scrollHeight);
//   },
// watch:{
//   getScroll:function(){
    
 
    


//   }
// },
  methods: {
    getPlay: function (value) {
      return (value / 10000).toFixed(1);
    },
    getPlayTime: function (times) {
      return parseInt(times / 60);
    },
    getPlaySecond: function (times) {
      return parseInt(times % 60);
    },
  
    scrollHeight: function () {
  
    if(this.children.children[0].type=='mArticle'){
    this.$nextTick(() => {
        if (this.$refs.videoImg) {
          var videoH = this.$refs.videoImg[0].getBoundingClientRect().top;
          var winH = window.innerHeight / 2;
          if (videoH < winH && videoH > 0) {
            this.show = true;

            // if(this.children.children[0].model.resource.id){

            // }else{
            //   
            // }
          } else {
            this.show = false;
          }
        }
      });
    }
     
    },
    getVideoId(child) {
      console.log(child.model.resource.id);
      // this.$router.push({ path: "/home/classify" });
      this.$router.push({ path: "/classify",query:{id:child.model.resource.id} })
      this.$store.commit("getIdVideo",{id:child.model.resource.id})
    },
    getUserId(child){
      console.log("user",child.model.resource.user_id);
        this.$router.push({ path: "/user",query:{id:child.model.resource.user_id} })
      this.$store.commit("getIdVideo",{id:child.model.resource.user_id})
    }
  },
  // update: function () {

  // },
};
</script>

<style lang="less" scoped>
.big-page {
  width: 100%;
  background: white;
  border-radius: 10px;
  margin: 10px;
  .big-card {
    .author {
      .creator {
        .creator-card {
          display: flex;
          flex-wrap: wrap;
          margin: 10px;
          .user-name {
            display: flex;
            align-items: center;
            img {
              width: 40px;
              height: 40px;
              border-radius: 50%;
            }
            .user-title {
              font-size: 14px;
              margin: 10px;
              color: #555;
            }
          }
          h5 {
            width: 100%;
            margin: 0;
          }
        }

        .main-img {
          width: 100%;

          img {
            width: 100%;
          }
        }
        .tui-guang {
          display: flex;
          justify-content: space-between;
          padding: 10px;

          span {
            font-size: 14px;
            &:nth-of-type(1) {
              color: #555;
            }
            &:nth-of-type(2) {
              color: #999;
            }
          }
        }
      }
    }
  }
  .article-card {
    .team-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 10px;
      .title-top {
        display: flex;
        align-items: center;
        margin-left: 10px;
        img {
          width: 40px;
          height: 40px;
          border-radius: 50%;
        }
        span {
          font-size: 12px;
          margin: 5px;
          span {
            font-weight: 700;
          }
        }
      }
      p {
        color: sandybrown;
        font-size: 12px;
        font-weight: 800;
        i {
          font-size: 10px;
          color: #999;
          margin: 0 10px;
        }
      }
    }

    .main-title {
      font-size: 14px;
      font-weight: 600;
      margin: 10px;
    }
    .main-img {
      width: 100%;
      position: relative;
      .video-img {
        height: 200px;
        img {
          width: 100%;
        }
        video {
          height: 100%;
        }
      }

      .look {
        position: absolute;
        right: 0px;
        bottom: 0px;
        color: white;
        margin: 10px;
        font-size: 13px;
      }
    }
    .team-down {
      display: flex;
      justify-content: space-around;
      margin: 10px;
      align-items: center;
      span {
        color: #666;
        i {
          margin-right: 5px;
        }
      }
    }
  }
}
</style>